<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>Document</title>
    <script type="text/javascript" src="../js/vue.js"></script>
  </head>
  <body>
    <!-- 
        1.关于组件名：
            一个单词组成：
                第一种写法：首字母小写 ==> school
                第二种写法：首字母大写 ==> School
            多个单词组成：
                第一种写法：kebab-case命名 ==> my-school
                第二种写法：CamelCase命名 ==> MySchool (需Vue脚手架支持)
            备注：
                组件名尽可能回避HTML中已有的元素名称，例如：h1,h2,H2都不行 
                可以使用name配置项指定组件在开发者工具中呈现的名字
        2.关于组件标签：
            第一种写法：<school></school>
            第二种写法：<school/>
            备注： - 不使用脚手架时，第二种写法<school/>会导致后续组件不能渲染
        3.一个简写形式：
            const school = Vue.extend(options) -==> 简写： const school = options
            也就是直接省略 Vue.extend
            const school = {
              name:'atguigu',
              template: `
                 <div>
                      <h2>学校名称：{{schoolName}}</h2>
                      <h2>学校地址：{{address}}</h2>
                 </div>
                 `,
              data() {
                return {
                  schoolName: "尚硅谷",
                  address: "北京",
                };
              },
            };
    -->
    <div id="root1">
      <h1>{{msg}}</h1>
      <xuexiao></xuexiao>
    </div>
    <script type="text/javascript">
      Vue.config.productionTip = false;
      // const school = Vue.extend(options) -==> 简写： const school = options
      // 简写最终也会调用 extend方法
      const school = {
        name:'atguigu',
        template: `
           <div>
                <h2>学校名称：{{schoolName}}</h2>
                <h2>学校地址：{{address}}</h2>
           </div>
           `,
        data() {
          return {
            schoolName: "尚硅谷",
            address: "北京",
          };
        },
      };
      const vm1 = new Vue({
        el: "#root1",
        data: {
          msg: "你好啊",
        },
        components: {
          xuexiao: school,
        },
      });
    </script>
  </body>
</html>
